import React, { Component } from 'react';
import {Link } from "react-router-dom";
import '../assets/css/basic.css';
import '../assets/css/index.css';
const axios = require('axios');

class Home extends Component {
    constructor() {
        super(); // 继承Component
        //定义数据
        this.state = {
         list: [],
         domin: 'http://a.itying.com/'
        }
    }
    requestData =() => {
        let api = `${this.state.domin}api/productlist`;

        axios.get(api).then(res => {
            console.log(res.data.result)
            this.setState({
                list: res.data.result
            })
        })
    }
    componentDidMount() {
        this.requestData();
    }
    render() {
        return (
            <div>
                    <header className="index_header">
                
                        <div className="hlist">
                            <img src={require("../assets/images/rexiao.png")}/>
                            <p>热销榜</p>				
                        </div>
                        
                        <div className="hlist">
                            <img src={require("../assets/images/caidan.png")} />
                            <p>点过的菜</p>				
                        </div>
                        <div className="hlist">
                            
                            <img src={require("../assets/images/sousuo.png")}/>
                            <p>搜你喜欢</p>				
                        </div>
                
                </header>			
            
                    <div className="content">
                            {
                                this.state.list.map((value, key) => {
                                    return(
                                        <div className="item" key={key}>
                                            <h3 className="item_cate">{value.title}</h3>
                                            <ul className="item_list">
                                            {
                                                value.list.map((v,k) => {
                                                    return(
                                                        <li key={k}>
                                                            <Link to={`/pcontent/${v._id}`}>
                                                                <div className="inner">
                                                                    <img src={`${this.state.domin}${v.img_url}`} />
                                                                    <p className="title">{v.title}</p>						
                                                                    <p className="price">￥{v.price}</p>
                                                                </div>
                                                            </Link>		
                                                        </li>
                                                    )
                                                })
                                            }
                                        </ul>
                                    </div>
                                    )
                                })
                            }
                    </div>
                    <div className="bg" id="bg">
                    </div>
            </div>
        )
    }
}

export default Home;